import React, { Component } from 'react'
// import PropTypes from 'prop-types'  // 单独下载

export default class Header extends Component {
  // 对接收props进行类型、必须性限制
  // static propTypes = {
  //   addTodo:PropTypes.func.isRequired
  // }

  handleKeyUp = (e)=>{
    const {keyCode,target} = e
    console.log(target.value);
    // 13 回车键
    if(keyCode !== 13) return
    if(target.value.trim() === '') alert('输入不能为空')
    this.props.addTodo(target.value)
    target.value = ''  // 清空输入
  }

  render() {
    return (
      <div className="todo-header">
      <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
  </div>
    )
  }
}
